<template>
  <div class="container">
    <div class="search">
        <router-link to="/">
            <van-icon name="cross" size="20"></van-icon>
        </router-link>
        <van-search v-model="searchCity" placeholder="请输入搜索关键词"/>
    </div>
    <van-tabs v-model="active">
        <van-tab title="国内"></van-tab>
        <van-tab title="国外"></van-tab>
    </van-tabs>
    <div class="interval">#</div>
    <div>
        <div class="location-box">
            <span>当前定位</span>
            <div class="location-city">
                <div>
                    <van-icon name="location" color="#00BFFF"></van-icon>
                    惠州
                </div>
            </div>
            <span>热门城市</span>
            <van-grid :column-num="3" :gutter="10">
                <van-grid-item
                    v-for="(value, index) in hotCities"
                    :key="index"
                    :text="value"
                />
            </van-grid>
        </div>
        <van-index-bar v-for="(items,index) in ChineseCities" :key="index">
            <van-index-anchor :index="indexList[index]" />
            <van-cell :title="item" v-for="(item, i) in items" :key="i"/>
        </van-index-bar>
    </div>
  </div>
</template>

<script>

import { Icon, Search, Tab, Tabs, Grid, GridItem, IndexBar, IndexAnchor, Cell } from 'vant';
export default {
    name: 'VanCites',
    components: {
        VanIcon: Icon,
        VanSearch: Search,
        VanTab: Tab,
        VanTabs: Tabs,
        VanGrid: Grid,
        VanGridItem: GridItem,
        VanIndexBar: IndexBar,
        VanIndexAnchor: IndexAnchor,
        VanCell: Cell
    },
    data () {
        return {
            searchCity: '',
            active: 0,
            hotCities: ['北京','长沙', '成都', '重庆', '大连', '广州', '哈尔滨', '杭州', '济南', '昆明', '南京', '青岛', '三亚', '上海', '沈阳', '深圳', '武汉', '天津', '厦门', '西安', '郑州'],
            indexList: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','Z'],
            ChineseCities:[
                ['安康','安庆'],
                ['百色','保定'],
                ['长春','长沙','重庆','崇左'],
                ['大连','大理','德州'],
                ['防城港','佛山'],
                ['桂林','贵阳'],
                ['贺州','惠州'],
                ['吉林','金门'],
                ['开封','昆明'],
                ['来宾','洛阳','柳州'],
                ['马鞍山','茂名'],
                ['南京','南宁','宁波'],
                ['攀枝花','濮阳'],
                ['秦皇岛','齐齐哈尔'],
                ['日克则','日照'],
                ['上海','深圳','苏州'],
                ['太原','天津'],
                ['乌鲁木齐','梧州'],
                ['厦门','西安'],
                ['雅安','银川'],
                ['珠海','遵义'],
            ]

        }
    },
    methods: {
      
    }
}
</script>

<style lang="less" scoped>
    .container {
        display: flex;
        width: 100%;
        flex-direction: column;
        background-color: #eee;
        box-sizing: border-box;
        .search {
            position: fixed;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            padding-left: 10px;
            width: 100%;
            z-index: 1000;
            /deep/.van-search {
                width: 90%;
            }
        }
        .interval {
            // width: 100%;
            padding: 5px 20px;
            background-color: #eee;
            margin-top: 98px;    
        }
        .location-box {
            background-color: white;
            padding: 0 20px;
            padding-bottom: 10px;
            span {
                font-size: 10px;
                line-height: 30px;
                color: #9C9C9C;
            }
            .location-city {
                div {
                    padding: 5px;
                    width: 50px;
                    border: 1px solid #eee;
                    font-size: 10px;
                    text-align: center;
                }
            }
            /deep/ .van-grid {
                padding-left: 0;
            }
            /deep/.van-grid-item__content {
                padding: 5px 8px;
            }
        }
        /deep/ .van-tabs {
            position: fixed;
            z-index: 1000;
            width: 100%;
            top: 54px;
        }
        // /deep/ .van-index-anchor--sticky {
        //     top: 98px;
        //     background-color: #eee;
        // }
    }
</style>